<template>
	<view>
		<scroll-view scroll-x :scroll-into-view="scrollInto" scroll-with-animation class="scroll-row border-bottom border-light-secondary"
		 style="height: 100rpx;">
			<view v-for="(item,index) in tabBars" :key="index" class="scroll-row-item px-3 py-2 font-md" :id="'tab' + index"
			 :class="tabIndex === index ? 'text-main font-lg font-weight-bold' : ''" @click="changeTab(index)">{{item.name}}</view>
		</scroll-view>
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:'+scrollH+'px;'">
			<!-- @scrolltolower：scroll组件的触底事件 -->
			<swiper-item v-for="(item,index) in newsList" :keys="index">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="loadmore(index)">
					<!-- 有数据的时候才显示上拉加载更多 -->
					<template v-if="item.list.length > 0">
						<!-- 列表显示 -->
						<block v-for="(item2,index2) in item.list" :key="index2">
							<!-- 列表样式 -->
							<topic-list :item="item2" :index="index2"></topic-list>
							<!-- 分割线 -->
							<divider></divider>
						</block>
						<!-- 上拉加载 -->
						<load-more :loadmore="item.loadmore"></load-more>
					</template>
					<!-- 没有数据的时候显示无数据 -->
					<template v-else>
						<no-thing></no-thing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const demo = [{
		cover: '/static/demo/topicpic/1.jpeg',
		title: '话题名称1',
		desc: '话题描述1',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/3.jpeg',
		title: '话题名称2',
		desc: '话题描述2',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/4.jpeg',
		title: '话题名称3',
		desc: '话题描述3',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/5.jpeg',
		title: '话题名称4',
		desc: '话题描述4',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/6.jpeg',
		title: '话题名称5',
		desc: '话题描述5',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/7.jpeg',
		title: '话题名称6',
		desc: '话题描述6',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/8.jpeg',
		title: '话题名称7',
		desc: '话题描述7',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/9.jpeg',
		title: '话题名称8',
		desc: '话题描述8',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/10.jpeg',
		title: '话题名称9',
		desc: '话题描述9',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/11.jpeg',
		title: '话题名称10',
		desc: '话题描述10',
		news_count: 10,
		today_count: 10
	}]
	import topicList from '@/components/news/topic-list.vue';
	import loadMore from '@/components/common/loadmore.vue'
	export default {
		components: {
			topicList,
			loadMore
		},
		data() {
			return {
				// 列表高度
				scrollH: 600,
				// 顶部选项卡
				scrollInto: "",
				tabIndex: 0,
				tabBars: [{
					name: '关注'
				}, {
					name: '推荐'
				}, {
					name: '热点'
				}, {
					name: '财经'
				}, {
					name: '娱乐'
				}, {
					name: '军事'
				}, {
					name: '历史'
				}, {
					name: '本地'
				}],
				newsList: []
			}
		},
		// 首页顶部搜索页跳转
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '../search/search?type=topic'
			});
		},
		// 首页顶部发布按钮跳转
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '../add-input/add-input'
			})
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync()
			this.scrollH = systemInfo.windowHeight - uni.upx2px(101)
			// 根据选项卡生成列表
			this.getData()
		},
		methods: {
			// 获取数据
			getData() {
				var arr = []
				for (let i = 0; i < this.tabBars.length; i++) {
					// 生成列表模板
					let obj = {
						// 1.上拉加载更多 2.加载中... 3.没有更多了
						loadmore: "上拉加载更多",
						list: []
					}
					// 只有前两个导航菜单中的列表有数据，其他的都没有数据
					if (i < 2) {
						obj.list = demo
					}
					arr.push(obj)
				}
				this.newsList = arr
			},
			// 监听滑动事件
			onChangeTab(e) {
				this.changeTab(e.detail.current)
			},
			follow(index) {
				this.newsList[0].list[index].isFollow = true
			},
			doSupport(e) {
				let item = this.newsList[0].list[e.index]
				let msg = e.type === 'support' ? '顶' : '踩'
				if (item.support.type === '') {
					item.support.type = e.type
					item.support[e.type + '_count']++
				}
				// 之前已经顶过了
				else if (item.support.type === 'support' && e.type === 'unsupport') {
					item.support.unsupport_count++
					item.support.support_count--
				}
				// 之前已经踩过了
				else if (item.support.type === 'unsupport' && e.type === 'support') {
					item.support.support_count++
					item.support.unsupport_count--
				}
				item.support.type = e.type
				uni.showToast({
					title: msg + '成功'
				});
			},
			changeTab(index) {
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index
				this.scrollInto = 'tab' + index
			},
			loadmore(index) {
				// 拿到当前列表
				let item = this.newsList[index]
				// 判断是否处理可加载状态(上拉加载更多)
				if (item.loadmore !== '上拉加载更多') return;
				// 修改当前列表加载状态
				item.loadmore = '加载中...'
				// 模拟数据请求
				setTimeout(() => {
					// 加载数据(使用ES6的扩展运算符将数组元素合并来模拟假数据)
					item.list = [...item.list, ...item.list]
					// 恢复加载状态
					item.loadmore = '上拉加载更多...'
				}, 2000)
			}
		}
	}
</script>

<style>

</style>
